<template>
	<view class="fly-box">
		<view class="gd-box">
			<view class="gd" v-for="(_, index) in 3" :key="index">
				<image v-for="(offset, i) in offsets" :key="i" :style="{ bottom: (offset + i * 100) % 480 + 'rpx' }"
					src="/static/dot-images/dot1.png" mode="widthFix" class="dot"></image>
			</view>
		</view>
		<image src="/static/fly-images/fly2.png" mode="widthFix" class="fly"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				offsets: Array.from({
					length: 5
				}, () => 0),
				intervalId: null,
			};
		},
		mounted() {
			this.intervalId = setInterval(() => {
				this.offsets = this.offsets.map(offset => (offset + 20) % 480);
			}, 30);
		},
		beforeDestroy() {
			if (this.intervalId) clearInterval(this.intervalId);
		}
	};
</script>

<style lang="scss" scoped>
	.fly-box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.gd-box {
		display: flex;
		gap: 10rpx;
	}

	.gd {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 30rpx;
		height: 500rpx;
	}

	.dot {
		position: absolute;
		bottom: 0;
		width: 30rpx;
		height: 30rpx;
		display: block;
	}

	.fly {
		display: block;
		width: 350rpx;
		height: 350rpx;
	}
</style>